<template>
  <div class="detail-popup">
    <view class="nav-style">
      <view :style="{ height: statusBarHeight + 'px' }" />
      <view class="nav-main" :style="{ height: navbarHeight + 'px' }">
        <slot name="left">
          <view class="left" :style="{ 'margin-top': navbarHeight / 2 + 'px' }">
            <image class="btn-icon" :src="require('@/static/project/back.png')" mode="scaleToFill" @click="back" />
          </view>
          <view class="page-title">
            <span>需求详情</span>
          </view>
        </slot>
      </view>
      <view>
        <van-divider />
      </view>
    </view>
    <div :style="{ 'margin-top': statusBarHeight + navbarHeight + 30 + 'px','padding-bottom': 4 + 'px',}">
    </div>
    <div class="detail-content">
      <div class="demand-more">
        <div>需求名称</div>
        <div>{{ detailInfo.requirementName }}</div>
      </div>
      <div class="demand-more">
        <div>需求编号</div>
        <div>{{ detailInfo.requirementNumber }}</div>
      </div>
      <div class="demand-more">
        <div>需求描述</div>
        <div>{{ detailInfo.requirementDesc }}</div>
      </div>
      <div class="demand-more">
        <div>需求负责人</div>
        <div>{{ detailInfo.name }}</div>
      </div>
      <div class="demand-more">
        <div>需求状态</div>
        <div v-if="detailInfo.requirementStatus=='wait'">
          未开始
        </div>
        <div v-else-if="detailInfo.requirementStatus=='doing'">
          进行中
        </div>
        <div v-else-if="detailInfo.requirementStatus=='suspend'">
          已挂起
        </div>
        <div v-else>
          已关闭
        </div>
      </div>
      <div class="demand-more">
        <div>需求内容</div>
        <div>
          <rich-text :nodes="detailInfo.requirementContent" />
        </div>
      </div>
      <div class="demand-more">
        <div>创建时间</div>
        <div>{{ detailInfo.createTime | timeFormat }}<span>h</span></div>
      </div>
    </div>
  </div>
</template>

<script>
import { getDeviceInfo } from '@/utils/storage'
import { formatTimestamp } from '@/utils/format'
import { deleteDemend } from '@/apis/project'
export default {
  filters: {
    timeFormat(value) {
      return	formatTimestamp(value)
    },
  },
  data() {
    return {
      statusBarHeight: '0',
      navbarHeight: '0',
      swiperHeight: 0,
      xqHeight: 0,
      demandId: '',
      detailInfo: {},
    }
  },
  onLoad(option) {
    this.detailInfo = JSON.parse(decodeURIComponent(option.param))
  },
  created() {
    this.setHeight()
  },
  mounted() {
    this.setHeight()
  },
  methods: {
    // 设置高度
    setHeight() {
      const { screenHeight, statusBarHeight, navbarHeight } = getDeviceInfo()
      this.statusBarHeight = statusBarHeight
      this.navbarHeight = navbarHeight
      this.swiperHeight = screenHeight - statusBarHeight - navbarHeight - 142
    },
    back() {
      uni.navigateBack()
    },
  },
}
</script>
<style lang="scss" scoped>
.detail-popup{
	.nav-style{
		position: fixed;
		top: 0px;
		background-color: #fff;
		width: 100%;
		left: 0px;
		z-index: 10;
	}
	.nav-main {
		.left {
			height: 32px;
			padding: 0 26rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			left: 24rpx;
			transform: translateY(-50%);
			border-radius: 32rpx;

			.btn-icon {
				width: 48rpx;
				height: 48rpx;
			}

			.line {
				width: 2rpx;
				height: 18px;
				margin: 0 14rpx;
				background: #e7ebee;
			}
		}
		.page-title {
			text-align: center;
			height: 40px;
			line-height: 41px;
			font-weight: 500;
		}

		.title {
			font-size: 32rpx;
			font-weight: 500;
			color: #000000;
		}
	}
	.detail-content{
		box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.06);
		width: 93%;
		margin: 0 auto;
		margin-bottom: 12px;
		border-radius:3px;
	}
	.demand-more{
		display:flex;
		padding: 8px 0px;
		width: 93%;
		margin: 0 auto;
		border-bottom: 1px solid #f2f2f2;
		div:nth-child(1){
			width:30%;
			font-size: 14px;
			color: #999;
			padding-right:10px;
			text-align:right;
		}
		div:nth-child(2){
			width:70%;
			padding-right: 10px;
		}
	}
}
</style>
<style lang="scss">
	.detailpop{
		.uni-popup .uni-popup__wrapper{
			position: absolute !important;
			top: 9%;
		}
	}
</style>
